<template>
	<div class="homepage">
		<el-row class="row1">
		  <el-col class="col1" :span="12" style="padding-right: 8px;">
			<el-card class="box-card" style="height:29vh;overflow: auto;">
			    <h4>待审核</h4>
				<div class="daishen">
					<el-row class="row_1" v-for="(x,index) in tableData" :key="index">
						<el-col class="col_1" :span="6">
							<h5>姓名</h5>
							<span>{{x.userName}}</span>
						</el-col>
						<el-col class="col_1" :span="6">
							<h5>请假类</h5>
							<span>{{x.typeName}}</span>
						</el-col>
						<el-col class="col_1" :span="6">
							<h5>请假时间</h5>
							<span style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{x.createTime}}</span>
						</el-col>
						<el-col class="col_1" :span="6">
							<h5>操作</h5>
							<i @click="look">查看</i>
						</el-col>
					</el-row>
				</div>
			</el-card>
		  </el-col>
		  <el-col class="col1" :span="12" style="padding-left: 8px;">
			  <el-card class="box-card"  style="height:29vh;overflow: auto;">
			    <h4>学生信息</h4>
				<div class="daishen">
					<el-row class="row_1 row_child" v-for="(x,index) in tableinfo" :key="index">
						<el-col class="col_1" :span="4">
							<h5>姓名</h5>
							<span>{{x.stuName}}</span>
						</el-col>
						<el-col class="col_1" :span="4">
							<h5>学号</h5>
							<span>{{x.stuNum}}</span>
						</el-col>
						<el-col class="col_1" :span="4">
							<h5>性别</h5>
							<span>{{x.stuSex}}</span>
						</el-col>
						<el-col class="col_1" :span="4">
							<h5>监护人</h5>
							<span>{{x.stuPerson}}</span>
						</el-col>
						<el-col class="col_1" :span="4">
							<h5>年龄</h5>
							<span>{{x.stuAge}}</span>
						</el-col>
						<el-col class="col_1" :span="4">
							<h5>班级</h5>
							<span>{{x.clazzName}}</span>
						</el-col>
					</el-row>
				</div>
			  </el-card>
		  </el-col>
		</el-row>
		<div class="manager" style="height:45vh;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);overflow: auto;">
			<h4>班级管理</h4>
			<el-row class="row_2" v-for="(x,index) in tablemanage" :key="index">
				<el-col class="col_2" :span="4">
					<h5>编号</h5>
					<span>{{x.clazzId}}</span>
				</el-col>
				<el-col class="col_2" :span="4">
					<h5>名称</h5>
					<span>{{x.clazzName}}</span>
				</el-col>
				<el-col class="col_2" :span="4">
					<h5>负责人</h5>
					<span>{{x.teaName}}</span>
				</el-col>
				<el-col class="col_2" :span="4">
					<h5>上课教室</h5>
					<span>{{x.clazzRoom}}</span>
				</el-col>
				<el-col class="col_2" :span="4">
					<h5>班级人数</h5>
					<span>{{x.num}}</span>
				</el-col>
				<el-col class="col_2" :span="4">
					<h5>操作</h5>
					<i @click="details">详情</i>
					<i @click="details" style="color: #77b24c">修改</i>
					<i @click="details">删除</i>
				</el-col>
			</el-row>
		</div>
		
	</div>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import {staffuloainfo,studentinfo,classnames} from "../api/zhy"
	import {useRouter} from 'vue-router';
	let tableData=ref([])
	let tableinfo=ref([])
	let tablemanage=ref([])
	let pageIndex=ref(1)
	let pageSize=ref(3)
	const router = useRouter();
	const initstaffinfo=async()=>{
		let res=await staffuloainfo({
			pageIndex:pageIndex.value,
			pageSize:pageSize.value,
		})
		tableData.value=res.data
	}
	initstaffinfo()
	//学生信息
	const initstudentinfo=async()=>{
		let res=await studentinfo({
			pageIndex:pageIndex.value,
			pageSize:pageSize.value
		})
		// console.log(res)
		tableinfo.value =res.data
	}
	initstudentinfo()
	//班级
	const initclassname=async()=>{
		let res=await classnames({
			pageIndex:pageIndex.value,
			pageSize:pageSize.value
		})
		tablemanage.value=res.data
	}
	initclassname()
	//点击查看跳到管理审批
	const look=()=>{
		router.push("/approvalmanager")
	}
	//点击跳转到班级管理
	const details=()=>{
		router.push("/classmanager")
	}
</script>

<style lang="less" scoped>
	.homepage{
		width: 100%;
		overflow: hidden;
	}
	.homepage .row1 .col1{
		border-radius: 5px;
	}
	/* 两个上面 卡片 */
	.homepage .el-card__body, .el-main{
		// padding: 15px;
		border-radius: 30px;
	}
	.el-card__body {
	    --el-card-padding:0px !important; 
	}
	.homepage .row1 .col1 h4{
		text-align: center;
		// margin-bottom: 15px;
	}
	/* 上面的俩表 */
	/* 1表 */
	.homepage .row_1{
		text-align: center;
		background-color: #f6fafd;
		margin-bottom: 5px;
		border-radius: 5px;
	}
	.homepage .row_1:nth-of-type(even){
		background-color: #fdf3f6;
	}
	.homepage .row_1 .col_1 span{
		// margin-top: 8px;
		margin-bottom: 10px;
		display: inline-block;
		font-size: 13px;
		color: gray;
	}
	.homepage .row_1 .col_1 i{
		border: none;
		color: #2aafec;
		margin-top: 6px;
	}
	.homepage .row_1 .col_1 h5{
		margin-top: 5px;
	}
	/* 2表 */
	.homepage .row_child:nth-of-type(even){
		background-color: #fafdf3;
	}
	
	/* 班级管理 */
	.homepage .manager{
		margin-top: 15px;
		text-align: center;
		background-color: #ffffff;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.homepage .manager .row_2{
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		border-radius: 10px;
		background-color: #f6fafd;
	}
	.homepage .manager .row_2:nth-of-type(even){
		background-color: #fdf3f6;
	}
	.homepage .manager .row_2 .col_2 h5{
		// margin-top: 10px;
	}
	.homepage .manager .row_2 .col_2 span{
		font-size: 13px;
		color: gray;
		display: inline-block;
		margin-top: 8px;
		margin-bottom: 10px;
	}
	.homepage .manager .row_2 .col_2 i{
		border: none;
		margin-top: 5px;
		margin-right: 10px;
	}
	.homepage .manager .row_2 .col_2 i:nth-of-type(1){
		color: #2aafec;
	}
	.homepage .manager .row_2 .col_2 i:nth-of-type(2){
		color: limegreen;
	}
	.homepage .manager .row_2 .col_2 i:nth-of-type(3){
		color: orangered;
	}
	.homepage i{
		cursor: pointer;
		font-style: normal;
		font-size: 13px;
		display: inline-block;
		margin-top: 8px;
	}
	h5{
		margin:10px;
		box-sizing: border-box;
	}
	h4{
		margin:10px;
		box-sizing: border-box;
	}
	::-webkit-scrollbar {
	        width: 0px;
	    }
</style>